<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue开关</title>
  <style>

    .evan-switch {
      position: relative;
      border-width: 1px;
      border-color: rgba(0, 0, 0, 0.1);
      border-style: solid;
      transition: background-color 0.3s;
      /* #ifndef APP-NVUE */
      box-sizing: content-box;
      /* #endif */
      margin-top: 10px;
    }

    .evan-switch--disabled {
      opacity: 0.3;
    }

    .evan-switch__circle {
      position: absolute;
      left: 0;
      top: 0;
      background-color: #fff;
      border-radius: 50%;
      /* #ifndef APP-NVUE */
      box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
      /* #endif */
      /* #ifdef APP-NVUE */
      box-shadow: 1px 0 0px 0 rgba(0, 0, 0, 0.05);
      /* #endif */
      transition: transform 0.3s;
    }
  </style>
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <!-- <script src='./vue.js'></script> -->

  <div id="app">
      <button id='text' @click='addButton'>增加开关</button>
      <evan-switch v-for="(value, i) in items" v-model="value.checked" :key='value.id' @printbuttonid='printId(value.id)'></evan-switch>
  </div>
  <script>
    let evanSwitch = `
    <div>
      <div @click="toggle" class="evan-switch" :class="{'evan-switch--disabled':disabled}"
        :style="{width:2*size+'px',height:switchHeight,borderRadius:size+'px',backgroundColor:currentValue===activeValue?activeColor:inactiveColor}">
        <div class="evan-switch__circle"
          :style="{width:size+'px',height:size+'px',transform:currentValue===activeValue?\`translateX(\${size}px)\`:\`translateX(0)\`}">
        </div>
      </div>
    </div>
    `

    var vm = new Vue({
      el: '#app',
      data() {
        return {
          num: 1,
          items: [
            {id:0,checked: true},
            {id:1,checked: true},
          ]
        }
      },
      methods: {
        printId(id){
          console.log(`当前开关id是第${id+1}---${id}`);
        },
        addButton(){
          // var a = 1
          this.items.push({id:++this.num,checked: true})
          console.log(this.num);
        }
      },
      components: {
        'evan-switch': {
          template: evanSwitch,
          name: 'EvanSwitch',
          props: {
            value: {
              type: [String, Number, Boolean],
              default: false
            },
            activeColor: {
              type: String,
              default: '#108ee9'
            },
            inactiveColor: {
              type: String,
              default: '#fff'
            },
            size: {
              type: Number,
              default: 30
            },
            disabled: {
              type: Boolean,
              default: false
            },
            activeValue: {
              type: [String, Number, Boolean],
              default: true
            },
            inactiveValue: {
              type: [String, Number, Boolean],
              default: false
            },
            beforeChange: {
              type: Function,
              default: null
            }
          },
          computed: {
            switchHeight() {
              // #ifdef APP-NVUE
              return this.size + 2 + 'px'
              // #endif
              // #ifndef APP-NVUE
              // return this.size + 'px'
              // #endif
            }
          },
          watch: {
            value: {
              immediate: true,
              handler(value) {
                this.currentValue = value
              }
            }
          },
          data() {
            return {
              currentValue: false
            }
          },
          methods: {
            toggle() {
              if (!this.disabled) {
                if (this.beforeChange && typeof this.beforeChange === 'function') {
                  const result = this.beforeChange(this.currentValue === this.activeValue ? this.inactiveValue : this.activeValue)
                  if (typeof result === 'object') {
                    result.then(() => {
                      this.toggleValue()
                    }).catch(() => { })
                  } else if (typeof result === 'boolean' && result) {
                    this.toggleValue()
                  }
                } else {
                  this.toggleValue()
                }
              }
            },
            toggleValue() {
              this.currentValue = this.currentValue === this.activeValue ? this.inactiveValue : this.activeValue
              this.$emit('input', this.currentValue)
              this.$emit('change', this.currentValue)
              this.$emit('printbuttonid');
            }
          }
        }
      }
    })
  </script>
</body>

</html>